<template>
  <div class="review">
    <h2>审核危险人员</h2>
    <el-form :model="record" label-width="100px">
      <el-form-item label="姓名">
        <el-input v-model="record.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="record.idCard" disabled></el-input>
      </el-form-item>
      <el-form-item label="风险等级">
        <el-input v-model="record.riskLevel" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="approve">审核安全</el-button>
        <el-button type="danger" @click="reject">危险人员</el-button>
        <!-- 新增监控回放按钮 -->
        <el-button @click="openVideoDialog" icon="el-icon-video-play">监控回放</el-button>
      </el-form-item>
    </el-form>

    <!-- 监控视频播放对话框 -->
    <el-dialog
        title="监控视频回放"
        :visible.sync="videoDialogVisible"
        width="60%"
        :before-close="handleVideoDialogClose"
    >
      <!-- 在这里添加视频播放器组件 -->
      <video ref="videoPlayer" width="100%" controls>
        <source :src="videoSrc" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReviewDangerousPerson',
  data() {
    return {
      record: this.$route.params.record,
      videoDialogVisible: false,
      videoSrc: 'https://example.com/your-video.mp4' // 替换为实际视频链接
    };
  },
  methods: {
    approve() {
      // 调用 Vuex action 删除危险人员记录
      this.$store.dispatch('deleteDangerousPerson', this.record.id)
          .then(() => {
            // 删除成功后，返回上一级界面
            this.$router.go(-1);
          })
          .catch(error => {
            console.error('Error deleting dangerous person:', error);
          });
    },
    reject() {
      // 不做删除操作，仅返回上一级界面
      this.$router.go(-1);
    },
    openVideoDialog() {
      // 打开视频播放对话框
      this.videoDialogVisible = true;
      // 可以在这里处理视频播放的逻辑，例如获取真实的视频链接等
    },
    handleVideoDialogClose(done) {
      // 关闭视频播放对话框时的处理
      // 可以在这里暂停视频播放等操作
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause(); // 暂停视频播放
      }
      done(); // 关闭对话框
    }
  }
};
</script>

<style scoped>
.review {
  padding: 20px;
}
</style>
